<template>
	<view>
		<view class="carousel" circular autoplay="true" interval="3000">
			<view class="carousel-item">
				<image :src="device.imageUrl"></image>
			</view>
		</view>

		<view class="device-content">
			<view class="device-info">
				<view class="machineName">
					<text>{{device.machineName}}</text>
				</view>
				<view class="desc">
					<text>{{device.deviceDesc}}</text>
				</view>
			</view>
			<view class="contact">
				<button @click="contactStore">联系店长</button>
			</view>
		</view>
		<view class="cut"></view>
		<view class="main-operate">
			<view class="operate-item">
				<view class="operate-text">
					<text class="main-text">自助开台</text>
					<text class="sub-text">使用会员积分或押金开台</text>
				</view>
				<view class="operate-btn">
					<button @click="openDevice(0)">去开台</button>
				</view>
			</view>
			<view class="operate-item">
				<view class="operate-text">
					<text class="main-text">美团开台</text>
					<text class="sub-text">使用美团券</text>
				</view>
				<view class="operate-btn" @click="openDevice(1)">
					<button>去开台</button>
				</view>
			</view>
			<view class="operate-item">
				<view class="operate-text">
					<text class="main-text">抖音开台</text>
					<text class="sub-text">使用抖音券</text>
				</view>
				<view class="operate-btn" @click="openDevice(1)">
					<button>去开台</button>
				</view>
			</view>
		</view>
		
		<view class="zhifutuan">
			<view class="tuangou" v-if="num==0" @click="goHexiao()">
				<view class="iconfont icon-code" style="font-size: 40rpx;color:#0DA944 ;float: left;height: 100rpx;line-height: 100rpx;text-align: center;"></view>
				<view class="tuangoutitle">
					<text style="color: #666666;">团购券</text>
				</view>
				<view class="tuangoutxt">
					<text>暂无可用团购券</text>
				</view>
				<view class="tuangouicon">
					<view class="iconfont icon-more" style="font-size: 32rpx;"></view>
				</view>
			</view>
			<view class="tuangou" v-if="num!=0&&!selected" @click="goMyCertificate()">
				<view class="iconfont icon-code" style="font-size: 40rpx;color:#0DA944 ;float: left;height: 100rpx;line-height: 100rpx;text-align: center;"></view>
				<view class="tuangoutitle">
					<text>团购券</text>
				</view>
				<view class="tuangoutxt">
					<text>可用<text
							style="color: #F04747;font-size: 32rpx;font-weight: 500;">{{num}}</text>张团购券</text>
				</view>
				<view class="tuangouicon">
					<view class="iconfont icon-more" style="font-size: 32rpx;"></view>
				</view>
			</view>
			<view class="tuangou" v-if="num!=0&&selected" @click="goMyCertificate()">
				<view class="iconfont icon-code" style="font-size: 40rpx;color:#0DA944 ;float: left;height: 100rpx;line-height: 100rpx;text-align: center;"></view>
				<view class="tuangoutitle">
					<text>团购券</text>
				</view>
				<view class="tuangoutxt">
					<text>已选<text style="color: #F04747;font-size: 32rpx;font-weight: 500;">1</text>张团购券</text>
				</view>
				<view class="tuangouicon">
					<view class="iconfont icon-more" style="font-size: 32rpx;"></view>
				</view>
			</view>
		</view>	
		<view class="cut"></view>
		<uni-popup ref="popup" type="bottom">
			<view class="bottom-content">
				<view class="bottom-title">
					自助开台
				</view>
				<view class="bottom-main">
					<view class="bottom-main-item">
						<view class="main-item-text">
							<text class="main-text">计费价格</text>
							<text class="sub-text">按分钟收费,最低消费0元</text>
						</view>
						<view class="main-item-text">
							<view>{{device.price}}元/小时</view>
						</view>
					</view>
					<view class="bottom-main-item">
						<view class="main-item-text">
							<text class="main-text">押金</text>
							<text class="sub-text">结束即退押金</text>
						</view>
						<view class="main-item-text">
							<view>{{requiredDeposit}}元</view>
						</view>
					</view>
					<view class="price-content">
						<view class="price-desc">需付押金:{{requiredDeposit}}元</view>
						<button class="price-btn" @click="beginOrder()">立即开启</button>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import Api from '@/common/api';
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import ePicker from '@/components/e-picker/e-picker.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	const {
		dateTimePicker,
		getMonthDay
	} = require('@/components/date.js');
	export default {
		components: {
			ePicker
		},
		data() {
			return {
				storeId: null,
                deviceId: null,
				device: {},
				servicePhone: null,
				num: 0,
				certificate:null,
				selected:false,
				requiredDeposit: null,
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(options) {
			let that = this;
			that.deviceId = options.deviceId;
			that.storeId = options.storeId;
			that.servicePhone = options.servicePhone;
			that.getDevice(that.deviceId);
			that.getCertificate();
		},
		onShow() {
			let that = this;
			uni.$once('usecert', function(data) {
				console.log('监听到事件来自返回的参数：');
				that.certificate = data;
				that.selected = true
			})
		},
		filters: {
			
		},
		methods: {
			async getCertificate() {
				let storeId = this.storeId;
				let params = {
					storeId: storeId
				}
				let data = await Api.apiCall('get', Api.certificate.listByStore, params);
				if (data) {
					console.log(data.length)
					this.num = data.length;
				}
			},
			async getDevice(deviceId) {
				let that = this;
				let data = await Api.apiCall('get', Api.device.getDeviceById, {
					id: deviceId
				});
				if (data) {
					console.log(data)
					that.device = data.device;
					that.requiredDeposit = that.device.deposit;
				}
			},
			async getRoomStatus(deviceId,operateType) {
				console.log("=======deviceId=" + deviceId);
				let that = this;
				let data = await Api.apiCall('get', Api.device.getRoomStatus, {
					deviceId: deviceId
				});
				if (data) {
					if(data.status == 1){
						uni.showToast({
							icon: "error",
							title: '设备使用中,不能开台'
						})
					}else if(data.status == 4){
						uni.showToast({
							icon: "error",
							title: '设备禁用,不能开台'
						})
					}
					else{
						if(1 == operateType){
						    that.requiredDeposit = 0;
						}
						that.$refs.popup.open('bottom');
					}
				}
			},
			goMyCertificate() {
				uni.navigateTo({
					url: '/pages/user/mycertificate?type=1&storeId=' + this.storeId
				});
			},
			openDevice(operateType){
				let that = this;
				that.getRoomStatus(that.deviceId,operateType);
			},
			toMeituanHexiao(){
				let that = this;
				uni.navigateTo({
					url:'/pages/meituan/hexiao?deviceId=' + that.deviceId
				})
			},
			toDouyinHexiao(){
				let that = this;
				uni.navigateTo({
					url:'/pages/douyin/hexiao?deviceId=' + that.deviceId
				})
			},
			async certPay(id){
				let params = {
					orderId:id,
					certId:this.certificate.id
				}
				let data = await Api.apiCall('post', Api.certificate.certPay, params);
				if(data&&data==1){
					uni.redirectTo({
						url: '/pages/money/paySuccess'
					})
				}
			},
			async beginOrder(){
				let that = this;
				let params = {
					deviceId: that.deviceId,
					storeId: that.storeId,
					price: that.device.deposit,
				};
				let data = await Api.apiCall('post', Api.order.createBilliardOrder, params);
				console.log(data);
				if (data) {
					let num = that.num;
					let selected = that.selected;
					let id = data.id;
					if(num!=0&&selected){
						//券支付
						that.certPay(id);
					}else{
						let url = `/pages/money/pay?id=${id}`;
						uni.redirectTo({
							url: url
						});
					}
				} else {
					that.$core.msg(data);
				}
			},
			contactStore(){
				let that = this;
				uni.makePhoneCall({
					phoneNumber: that.servicePhone
				})
			}
		}
	}
</script>

<style lang="scss">
    .carousel {
    	width: 686rpx;
    	height: 320rpx;
    	margin-left: 32rpx;
    
    	image {
    		width: 100%;
    		height: 100%;
    		background: #493D3E;
    		border-radius: 24rpx;
    		margin-top: 10rpx;
    	}
    
    	.carousel-item {
    		width: 100%;
    		height: 100%;
    		// padding: 0 28upx;
    		overflow: hidden;
    	}
    }
	
	.device-content{
		height: 170rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-left: 30rpx;
		padding-right: 30rpx;
		
		.contact{
			button{
				width: 150rpx;
				border-radius: 30rpx;
				background-color: #fbe33d;
				border: 2px solid black;
				font-size: 22rpx;
			}
		}
	}
	
	.device-info{
		padding-left: 34rpx;
		padding-right: 32rpx;
		padding-top: 20rpx;
	}
	
	.desc {
		font-size: 24rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #555555;
	}
	
	.machineName {
		font-size: 36rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		color: #1A1A1A;
	}
	
	.main-operate{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		
		.operate-item{
			margin-top: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 700rpx;
			height: 200rpx;
			background-color: #faf2e8;
			border-radius: 20rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			
			.operate-text{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: nowrap;
				
				.main-text{
					font-size: 30rpx;
					font-weight: bold;
				}
				
				.sub-text{
					font-size: 26rpx;
				}
			}
			
			.operate-btn{
				button{
					border-radius: 30rpx;
					background-color: #fbe33d;
					border: 2px solid black;
					font-size: 28rpx;
				}
			}
		}
	}
	
	.bottom-content{
		border-radius: 20rpx;
		height: 880rpx;
		background-color: #f3f4f3;
		
		.bottom-title{
			padding-top: 20rpx;
			text-align: center;
			color: #333333;
			font-size: 30rpx;
			font-weight: bold;
		}
		
		.bottom-main-item{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			width: 95%;
			height: 200rpx;
			background-color: #fefffe;
			border-radius: 20rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			margin: 0 auto;
			
			.main-item-text{
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				flex-wrap: nowrap;
				
				.main-text{
					font-size: 30rpx;
					font-weight: bold;
				}
				
				.sub-text{
					font-size: 26rpx;
				}
			}
		}
		
		.price-content{
			width: 100%;
			height: 150rpx;
			background-color: #fefffe;
			position: fixed;
			bottom: 1rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: nowrap;
			padding-left: 30rpx;
			padding-right: 30rpx;
			
			.price-desc{
				flex: 2;
			}
			
			.price-btn{
			    flex: 1;
				background-color: #fbe33d;
				border-radius: 30rpx;
			}
		}
	}
	
	.zhifutuan {
		margin-left: 32rpx;
		margin-top: 30rpx;
		padding-left: 32rpx;
		width: 686rpx;
		height: 100rpx;
		background: #FFFFFF;
		border: 1px solid #E8E8E8;
		border-radius: 24rpx;
		font-weight: 600;
	}
	
	.tuangou {
	    width:600rpx;
	    height:100rpx;
	}
	
	
	.tuangoutitle {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #909090;
		line-height: 100rpx;
		margin-left: 6rpx;
		float: left;
	}
	
	.tuangoutxt {
		font-size: 32rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0DA944;
		line-height: 100rpx;
		margin-left: 18rpx;
		float: right;
	}
	
	.tuangouicon{
	    position: absolute;
	    right: 60rpx;
	    padding-top: 23rpx;
		color: #0DA944;
	}
	
	.cut {
		height: 10rpx;
		background-color: #F7F7F7;
	}
	
</style>
